<app-common-page>

    <div class="login-form-body">
        <div class="login-logo">
            <h1>重置密码</h1>
        </div>
        <form nz-form class="form" [formGroup]="resetPwsForm" >

            <nz-form-item>
                <nz-form-control [nzSpan]="24">
                    <nz-input-group  [nzPrefix]="emailTemplate">
                        <input nz-input formControlName="email" name="email" type="text" id="email" />
                    </nz-input-group>
                    <ng-template #emailTemplate> 邮箱</ng-template>
                    <nz-form-explain *ngIf="resetPwsForm.get('email').dirty && resetPwsForm.get('email').errors">Please input your email!</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            
            <nz-form-item>
              <nz-form-control >
                <div nz-row [nzGutter]="24">
                  <div nz-col [nzSpan]="14">
                    <input  nz-input formControlName="verifyCode" id="verifyCode">
                  </div>
                  <div nz-col [nzSpan]="10">
                    <button nz-button (click)="getVerifyCode(resetPwsForm.value)" [disabled]="resetPwsForm.get('email').invalid || authCodeLableType">{{authCodeLable}}</button>
                  </div>
                </div>
                <nz-form-explain *ngIf="resetPwsForm.get('verifyCode').dirty && resetPwsForm.get('verifyCode').errors">Please input the verifyCode you got!</nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            
            <nz-form-item>
                <nz-form-control [nzSpan]="24">
                    <nz-input-group  [nzPrefix]="newPwdLock">
                        <input nz-input formControlName="newPwd" name="newPwd" type="password" id="newPwd" placeholder="6 -14位字符组成，必须包含数字与字母">
                    </nz-input-group>
                    <ng-template #newPwdLock>新密码</ng-template>
                    <nz-form-explain *ngIf="resetPwsForm.get('newPwd').dirty && resetPwsForm.get('newPwd').errors">Please input your password!</nz-form-explain>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-control [nzSpan]="24">
                    <nz-input-group [nzPrefix]="newConfirmPwdLock">
                        <input nz-input formControlName="newConfirmPwd" name="newConfirmPwd" type="password" id="newConfirmPwd">
                    </nz-input-group>
                    <ng-template #newConfirmPwdLock>确认密码</ng-template>
                    <nz-form-explain *ngIf="resetPwsForm.get('newConfirmPwd').dirty && resetPwsForm.get('newConfirmPwd').errors">Please input your password!</nz-form-explain>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item >
                <nz-form-control >
                    <button  nz-button [nzType]="'primary'" (click)="submit(resetPwsForm.value)" [disabled]="resetPwsForm.invalid">确认重置</button>
                </nz-form-control>
            </nz-form-item>

        </form>
    </div>

</app-common-page>